<template>
	<view class="container">
		<view class="top-nav">
			<text>心理咨询</text>
		</view>
		<!-- 免费咨询热线 -->
		<view class="notice-nav">
			<view class="notice-title">
				免费咨询热线
			</view>
			<view class="notice-info notice-info1">
				<view class="notice-content">
					<view class="list-item" v-for="(item,index) in personList" :key="index">
						<text>{{index+1}}、{{item.username}}</text>
						<text>{{item.phone}}</text>
						<text>{{item.workTime}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 心理咨询资料 -->
		<view class="notice-nav">
			<view class="notice-title">
				心理咨询
			</view>
			<view 
				v-for="(item,index) in dataList" 
				class="notice-info" 
				@click="()=>noticeDetail(item)" 
				:key="index"
			>
				<view class="notice-img">
					<image :src="item.titlePic?imgurl+item.titlePic:'http://cdn.91xiaokong.com/chewei/720/xinli.jpg'"></image>
				</view>
				<view class="notice-content">
					<view>{{item.title}}</view>
					<view style="color: #CCCCCC;">{{item.contentDesc}}</view>
				</view>
			</view>
		</view>

		<tabbar :current-index='2' />
	</view>
</template>

<script>
	import tabbar from '@/components/tab-bar'
	import {consultList} from '@/api/tab3';
	import {gongGaoList} from '@/api/tab1';

	export default {
		components: {
			tabbar
		},
		data() {
			return {
				baseUrl: 'http://weixiaokong.91xiaokong.com/jeecg-boot/',
				imgurl:'http://cdn.91xiaokong.com/chewei/',
				personList:[],
				dataList:[],
			}
		},
		async onLoad() {
			const _this = this;
			const {result:{records}} = await consultList();
			_this.personList = records;

			const {result:{records: recordsTemp}} = await gongGaoList({type:3});
			_this.dataList = recordsTemp;
		},
		methods: {
			noticeDetail(info) {
				const {id} = info;
				uni.navigateTo({
					url: `../news_detail/news_detail?id=${id}`
				})
			},
		}
	}
</script>

<style>
	.container {
		/* background-color: #ccc; */
		padding-bottom: 140rpx;
	}

	.top-nav {
		width: 100%;
		height: 200rpx;
		/* background-color: #ccc; */
		text-align: center;
		line-height: 200rpx;
	}

	.notice-nav {
		/* height: 300rpx; */
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
	}
	
	.notice-title {
		font-size: 30rpx;
		/* margin: 30rpx 0 0 30rpx; */
	}
	
	.notice-info {
		display: flex;
		justify-content: flex-start;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: #ccc 1rpx solid;
	}
	
	.notice-img {
		width: 120rpx;
		height: 120rpx;
		/* background-color: #baf; */
		margin-right: 30rpx;
	}
	
	.notice-img image {
		width: 120rpx;
		height: 120rpx;
	}
	
	.notice-content {
		overflow: hidden;
		font-size: 30rpx;
		text-overflow: ellipsis;
		/* height: 240rpx; */
		/* margin-right: 40rpx; */
		/* text-align: center; */
	}
	
	.notice-nav {
		/* height: 300rpx; */
		width: 88%;
		margin: 0 auto;
		border: 1rpx #706d6c;
		box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.1);
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}
	
	.notice-title {
		font-size: 30rpx;
		/* margin: 30rpx 0 0 30rpx; */
	}
	
	.notice-info {
		display: flex;
		justify-content: flex-start;
		margin-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: #ccc 1rpx dashed;

		
	}
	
	.notice-info:last-child{
		border-bottom: none;
	}

	.list-item{
		padding: 20rpx;
		display: flex;
		justify-content: left;
	}
	.list-item text{
		margin-right: 10rpx;
	}
</style>
